/* Patches for Semantic UI */

html {
  // Semantic UI sets <body> and <html> to 100% height by default
  // But we use a fixed topbar, so a 100% height <html> will overflow the page even if there's no content
  height: initial !important;

  overflow-x: hidden;

  // Only enable Chrome's overlay scrollbar on wide enough screens
  overflow-y: overlay;
  @media only screen and (max-width: 1210px) {
    overflow-y: auto;
  }
}

body {
  overflow-x: visible !important;
}

.ui.button:last-child {
  margin-right: 0;
}

.ui.placeholder.segment > .ui.icon.header {
  margin-bottom: 20px;

  > .icon {
    margin-bottom: 20px;
  }
}

.ui.form .field > label {
  font-size: 14px !important;
  margin-bottom: 8px !important;
}

// fomantic-ui-css set the .ui.selection.dropdown's padding-right too large
// Let's change it back
.ui.selection.dropdown {
  padding-right: 2.1em !important;
}

// https://github.com/Semantic-Org/Semantic-UI-React/issues/3133
.ui.dimmer .ui.workaround.loader::before {
  border-color: rgba(0, 0, 0, 0.1);
}
.ui.dimmer .ui.workaround.loader::after {
  border-color: #767676 transparent transparent;
}

.ui.header.withIcon {
  > .icon {
    font-size: 1.1em;

    + .content {
      padding-left: 0.6rem;
    }
  }
}

.ui.placeholder:not(.segment) {
  margin-top: -10px;
}

/* Hide reCAPTCHA Badge */

.grecaptcha-badge { 
  visibility: hidden;
}

/* Global styles */

pre {
  tab-size: 4;
}

p, textarea {
  line-height: 1.4285em !important;
}

.content-font {
  * {
    font-family: inherit;
  }
}
